import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { observer, inject } from "mobx-react";
@inject("sheetStore")
@observer
class GxlTableLefterRowCell extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: false,
      height: "1.5rem",
      left: 0,
      top: 0,
    };
  }
  componentDidMount() {
    var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
    this.setState({
      left: rect.x,
      top: rect.y,
    });
  }

  getStyle() {
    const { height, top } = this.state;
    const { row, tableTop, sheetStore } = this.props;
    const currentSheet = sheetStore.getCurrentSheet();
    const style = { height, lineHeight: height };
    if (currentSheet.fixedRowIndex && row <= currentSheet.fixedRowIndex) {
      style.position = "sticky";
      style.left = 0;
      style.top = top - tableTop;
      style.zIndex = 4;
      if(row==currentSheet.fixedRowIndex){
        style.boxShadow="0px 1px 0px 0px #999"
        style.borderBottom=0
      }
    }
    return style;
  }
  render() {
    const { row, sheet } = this.props;
    return (
      <div
        className="gxl-table-lefter-row-cell"
        style={this.getStyle()}
        sheet={sheet}
        row={row}
      >
        {row + 1}
      </div>
    );
  }
}

export default GxlTableLefterRowCell;
